<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./public/bt/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/index.css">
    <script src="./public/jquery.11.min.js"></script>
    <script>
        $(function () {
            
//            function change( bool) {
//                if(bool == 1){
//                    $('#userMsg').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color: red" ></span> '),
//                    $('#sub').attr('disabled',true);
//                }else if(bool ==0){
//                    $('#userMsg').html('<span class="glyphicon glyphicon-ok" style="color: green"></span> '),
//                    $('#sub').attr('disabled',false);
//                }
//            }
            
            //异步检测用户名是否存在
            //blur 失去焦点触发的事件
            //用户名
            
            $('input[name=username]').blur(function () {
                //声明一个变量    获取表单内输入的内容
                var uname = $(this).val();
                $.ajax({
                    url :'index.php?c=Mumber&a=checkUser' ,
                    type:'post',
                    data:{u:uname},
                    success:function (phpData) {
                        if(phpData == 1){
                            $('#userMsg').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color: red" ></span> '),
                            $('#sub').attr('disabled',true);
                        }else if(phpData == 0){
                            $('#userMsg').html('<span class="glyphicon glyphicon-ok" style="color: green"></span> '),
                            $('#sub').attr('disabled',false);
                        }
                    }
                })
            });
            //验证码
            $('input[name=code]').blur(function () {
                //声明一个变量    获取表单内输入的内容
                var uname = $(this).val();
                $.ajax({
                    url :'index.php?c=Mumber&a=checkCode' ,
                    type:'post',
                    data:{code:uname},
                    success:function (phpData) {
                        if(phpData == 0){
                            $('#codeMsg').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color: red" ></span> '),
                            $('#sub').attr('disabled',true);
                        }else {
                            $('#codeMsg').html('<span class="glyphicon glyphicon-ok" style="color: green"></span> '),
                            $('#sub').attr('disabled',false);
                        }
                    }
                })
            })
            //再次确认密码
            $('input[name=password1]').blur(function () {
                //声明一个变量    获取表单内输入的内容
                var uname1 = $(this).val();
                var uname = $('input[name=password]').val();
                if (uname==uname1){
                    $('#passMsg').html('<span class="glyphicon glyphicon-ok" style="color: green"></span> '),
                    $('#sub').attr('disabled',false);
                }else{
                    $('#passMsg').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color: red" ></span> '),
                    $('#sub').attr('disabled',true);
                }
            })
        })
    </script>
</head>
<body>
<div class="container">
    <form class="form-inline" method="post" action="">
        <div class="form-group c1">
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                <input  type="text" class="form-control" name="username" id="exampleInputAmount"  required="" placeholder="请输入用户名">
            </div>
            <span id = "userMsg" style="display: inline-block;width: 20px align-items: center"></span>
        </div>
        <br/>
        <div class="form-group ">
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                <input type="password" class="form-control" name="password" minlength="6" id="exampleInputAmount" placeholder="请输入密码">
            </div>
        </div>
        <br/>
        <div class="form-group ">
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                <input type="password" class="form-control" name="password1" id="exampleInputAmount" placeholder="请再次确认密码">
            </div>
            <span id = "passMsg" style="display: inline-block;width: 20px align-items: center"></span>
        </div>
        <br/>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-check" aria-hidden="true"></span></div>
                <input type="text"  name='code' class="form-control" id="exampleInputAmount"  placeholder="请输入验证码">
            </div>
            <span id = "codeMsg" style="display: inline-block;width: 20px align-items: center"></span>
        </div>
        <div class="form-group c2">
            <div class="input-group b1">
                <img src="?c=Mumber&a=showVerify" onclick="this.src='?c=Mumber&a=showVerify&d='+Math.random();" id="ercode"/>
                <a href="javascript:;" onclick="document.getElementById('ercode').src='?c=Mumber&a=showVerify'">看不清换一张</a>
            </div>
        </div>
        <br/>
        <input href="?c=Mumber&a=reg" type="submit" class="btn btn-primary c3 " value="注册" id="sub">
        <a href="index.php" type="submit" class="btn btn-primary ">返回首页</a>
    </form>
</div>
</body>
</html>
